<template>
	<view class="container">
		<u-navbar
			title="个人信息" 
			:background="{backgroundColor: '#fff'}"
		></u-navbar>
		<view class="content">
			<view style="width: 100%;" class="avatar flex justify-btw align-center">
				<text class="label">头像</text>
				<view class="flex justify-end align-center">
					<button open-type="chooseAvatar" @chooseavatar="onChooseAvatar" class="avatar-wrapper">
						<image
							:src="avatar"
							mode=""
							style="width: 72rpx;height: 72rpx;border-radius: 50%;background-color: #eee;"
						>
						</image>
					</button>
					<image src="../../static/images/new_right_arrow.png" style="width: 30rpx;height: 30rpx;margin-left: 16rpx" mode=""></image>
				</view>
			</view>
			<view class="name flex justify-btw align-center" @tap.stop="toChangeName">
				<text class="label">名称</text>
				<view class="flex justify-end align-center">
					<text>{{nickname}}</text>
					<image src="../../static/images/new_right_arrow.png" style="width: 30rpx;height: 30rpx;margin-left: 16rpx" mode=""></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
import {getCurrentInstance, ref } from 'vue'
import { onLoad, onUnload } from "@dcloudio/uni-app"
import { uploadFile } from '@/utils/uploadFile.js';
import {useMainStore} from '@/store/index.js'
	const mainStore = useMainStore()

const {proxy} = getCurrentInstance()
const queryParams = ref({})
const avatar = ref('')
const nickname = ref('')
onLoad(()=>{
	uni.$on('changeNameSuccess',()=>{
		mainStore.handleGetUserInfo()
		setTimeout(()=>{
			avatar.value = mainStore.userInfo.avatar
			nickname.value = mainStore.userInfo.nickname
			proxy.tui.toast('修改成功')
		}, 200)
	})
	let info = uni.getStorageSync('USER_INFO')
	avatar.value = info.avatar
	nickname.value = info.nickname
})
onUnload(()=>{
	uni.$off('changeNameSuccess')
})
function handleClick(){
	
}
function toChangeName(){
	uni.navigateTo({
		url:'/pages/setting/namePage'
	})
}
// 获取用户头像
function onChooseAvatar(e) {
	uploadFile({
		filePath: e.detail.avatarUrl,
		dir: 'image/',
		name: 'avatar'
	}).then(result => {
		avatar.value = result
		let query = {
			avatar: avatar.value,
			nickname: nickname.value
		}
		proxy.api.updateUserInfo(query).then(res=>{
			proxy.tui.toast('修改成功')
			mainStore.handleGetUserInfo()
		})
	}).catch(err => {
		console.log('werr',err)
		proxy.tui.toast('图片上传失败!请重新上传');
	});
	// avatar.value = e.detail.avatarUrl
}

</script>

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.avatar-wrapper {
		padding: 0;
		margin: 0;
		width: 72rpx;
		height: 72rpx;
		background-color: raga(0, 0, 0, 0);
		border: none;
	}
	.container {
		width: 100vw;
		height: 100vh;
		overflow-y: scroll;
		background-color: $uni-bg-color-grey;

		.content {
			width: 100vw;
			// height: 112rpx;
			@include str(28rpx, bold, #333);
			// line-height: 40rpx;
			background-color: #fff;
			padding: 20rpx;
			margin-bottom: 2rpx;
			.avatar, .name {
				line-height: 112rpx;
			}
		}
	}
</style>